<template>
  <div class="main brand-detail">
    <section>
      <el-form :model="formData" ref="form" label-width="160px">
        <el-form-item label="品牌名称：" prop="name" :rules="commonRules.notNullRule">
          <el-input v-model="formData.name" placeholder="品牌名称" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="排序：" prop="sort" :rules="commonRules.sortRule">
          <el-input type="number" v-model="formData.sort" placeholder="排序" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="更多跳转：" prop="jumpMoreUrl" :rules="commonRules.nullUrlRule">
          <el-input v-model="formData.jumpMoreUrl" placeholder="http(s)://" maxlength="100"></el-input>
        </el-form-item>
        <el-form-item label="是否启用：" prop="isUsable">
          <el-switch
            v-model="formData.isUsable"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="0">
          </el-switch>
        </el-form-item>
        <el-form-item label="图片：" prop="imgList" :rules="commonRules.notNullRule">
          <template v-for="(item, index) in formData.imgList">
            <div class="img-item-block" :key="index">
              <a href="javascript: void(0);" class="el-icon-remove" @click="delImg(index)"></a>
              <el-form-item label-width="0px" :prop="`imgList[${index}].picUrl`" :rules="commonRules.notNullRule">
                <el-upload
                  class="avatar-uploader"
                  accept="image/*"
                  :action="upladUrl"
                  name="file"
                  :show-file-list="false"
                  :before-upload="beforeUpload"
                  :on-success="(res)=>{ item.picUrl = replaceImgUrl(res.filePath); }">
                    <img v-if="item.picUrl" :src="item.picUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <div class="right-part">
                <link-type :disableTypes="[1, 2]" :propPrefix="`imgList[${index}]`" :link-obj="item" />
              </div>
            </div>
          </template>
          <el-button v-if="formData.imgList && formData.imgList.length < 10" type="primary" size="small" icon="el-icon-circle-plus" plain @click="addImg">添加一条</el-button>
        </el-form-item>
        <el-form-item label="">
          <el-button type="success" :loading="btnLoading" size="small" @click="save" plain>保存</el-button>
          <el-button type="primary" size="small" @click="$router.push({ name: 'brand' })" plain>返回</el-button>
        </el-form-item>
      </el-form>
    </section>
  </div>
</template>
<script>
import LinkType from '@/components/LinkType/index'
export default {
  name: 'brandDetail',
  components: {
    LinkType
  },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data(){
    return {
      pageLoading: false,
      btnLoading: false,
      formData: {
        id: '',
        name: '',
        sort: '',
        jumpMoreUrl: '',
        imgList: []
      }
    }
  },
  created() {
    if(this.id){
      this.fetchData()
    }
  },
  methods: {
    // 获取品牌详情
    fetchData() {
      this.pageLoading = true
      this.request({
        url: `/manage-home-web/v5/brand/detail/${this.id}`,
        method: 'get'
      }).then(({data}) => {
        this.formData = data
        this.formData.imgList = data.imgList || []
        this.pageLoading = false
      }).catch(err => {
        console.log(err)
        this.pageLoading = false
      })
    },
    // 添加图片
    addImg() {
      this.formData.imgList.push({
        brandId: this.id,
        title: "",
        picUrl: "",
        jumpType: 1,
        jumpUrl: "",
        jumpPageType: 5,
        jumpPageValue: ""
      })
    },
    // 删除图片
    delImg(index) {
      this.$confirm("确定移除该内容?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.formData.imgList.splice(index, 1)
      }).catch(() => {
        this.$message({ type: "info", message: "已取消操作" })
      })
    },
    // 保存或更新
    save() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }

        this.btnLoading = true
        this.request({
          url: this.formData.id ? '/manage-home-web/v5/brand/update' : '/manage-home-web/v5/brand/create',
          method: 'post',
          data: this.formData
        }).then(res => {
          this.btnLoading = false
          this.$message.success('操作成功')
          this.$router.push({ name: 'brand' })
        }).catch(e => {
          this.btnLoading = false
        })
      })
    }
  }
}
</script>
<style lang="scss">
@import "../../../styles/mixin";
.brand-detail{
  .el-input{
    width: 100%;
    max-width: 500px;
  }
  .img-item-block{
    @include flex;
    width: 100%;
    max-width: 750px;
    padding: 10px 50px 0 10px;
    border: 1px solid #efefef;
    margin-bottom: 12px;
    position: relative;
    .el-icon-remove{
      color: red;
      font-size: 18px;
      cursor: pointer;
      top: 12px;
      right: 12px;
      position: absolute;
      z-index: 2;
    }
    .right-part{
      @include sub-item;
    }
  }
}
</style>
